<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';

// const fn = (e: MouseEvent) => {
//     console.log(e.clientX);
// }

// onMounted(
//     () => {
//         document.addEventListener("mousemove", fn)
//     }
// )

// onUnmounted(
//     () => {
//         document.removeEventListener("mousemove", fn)
//     }
// )

// document.addEventListener("keyup")

// 1. 事件在 ts 中，需要传递事件的类型参数
// 2. 类型不知道怎么写，
//      可以先写 document.addEventListener("keyup") 
//      鼠标放到 addEventListener 上，可以看到事件的类型提示
const btn = (e: MouseEvent) => {
    console.log(e.clientX);
    console.log(e.clientY);
}

</script>

<template>
    <h1>Hello vue3</h1>
    <button @click="btn">点我显示坐标</button>
    <button @click="btn($event)">点我显示坐标</button>
</template>

<style scoped>
</style>